<template>
  <div class="server-status-container">
    <!-- 状态指示器 -->
<!--    <div class="status-indicator" :class="statusClass" @click="toggleDetail">-->
<!--      <i :class="statusIcon"></i>-->
<!--      <span class="status-text">{{ statusText }}</span>-->
<!--      <i class="el-icon-arrow-down toggle-icon" :class="{ 'is-active': showDetail }"></i>-->
<!--    </div>-->

    <!-- 详细信息面板 -->
    <transition name="slide-down">
      <div v-if="showDetail" class="status-detail">
        <div class="detail-item">
          <span class="label">服务地址:</span>
          <span class="value">{{ serverUrl }}</span>
        </div>
        <div class="detail-item">
          <span class="label">连接状态:</span>
          <span class="value" :class="statusClass">{{ statusText }}</span>
        </div>
        <div class="detail-item">
          <span class="label">最后检查:</span>
          <span class="value">{{ lastCheckTime }}</span>
        </div>
        <div v-if="!isOnline" class="detail-item">
          <span class="label">错误信息:</span>
          <span class="value error">{{ errorMessage }}</span>
        </div>
        <div class="action-buttons">
          <el-button
            size="mini"
            type="primary"
            :loading="checking"
            @click="checkStatus"
            icon="el-icon-refresh"
          >
            {{ checking ? '检查中...' : '重新检查' }}
          </el-button>
          <el-button
            v-if="!isOnline"
            size="mini"
            type="success"
            @click="tryReconnect"
            icon="el-icon-connection"
          >
            尝试重连
          </el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { checkServerStatus, serverStatus } from '@/utils/request'

export default {
  name: 'ServerStatus',
  data() {
    return {
      isOnline: true,
      checking: false,
      showDetail: false,
      lastCheck: Date.now(),
      errorMessage: '',
      serverUrl: process.env.VUE_APP_BASE_API || 'http://localhost:8080',
      checkTimer: null
    }
  },
  computed: {
    statusClass() {
      return {
        'online': this.isOnline,
        'offline': !this.isOnline,
        'checking': this.checking
      }
    },
    statusIcon() {
      if (this.checking) return 'el-icon-loading'
      return this.isOnline ? 'el-icon-success' : 'el-icon-error'
    },
    statusText() {
      if (this.checking) return '检查中'
      return this.isOnline ? '服务正常' : '连接失败'
    },
    lastCheckTime() {
      const diff = Date.now() - this.lastCheck
      if (diff < 60000) {
        return `${Math.floor(diff / 1000)}秒前`
      } else if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`
      } else {
        return `${Math.floor(diff / 3600000)}小时前`
      }
    }
  },
  mounted() {
    this.checkStatus()
    this.startAutoCheck()

    // 监听网络状态变化
    window.addEventListener('online', this.handleOnline)
    window.addEventListener('offline', this.handleOffline)
  },
  beforeDestroy() {
    this.stopAutoCheck()
    window.removeEventListener('online', this.handleOnline)
    window.removeEventListener('offline', this.handleOffline)
  },
  methods: {
    async checkStatus() {
      if (this.checking) return

      this.checking = true
      try {
        const isOnline = await checkServerStatus()
        this.isOnline = isOnline
        this.lastCheck = Date.now()
        this.errorMessage = ''

        if (isOnline) {
          this.$emit('status-change', 'online')
        } else {
          this.$emit('status-change', 'offline')
          this.errorMessage = '无法连接到后端服务'
        }
      } catch (error) {
        this.isOnline = false
        this.errorMessage = error.message
        this.$emit('status-change', 'error')
      } finally {
        this.checking = false
      }
    },

    async tryReconnect() {
      this.$message({
        message: '正在尝试重新连接...',
        type: 'info'
      })

      await this.checkStatus()

      if (this.isOnline) {
        this.$message({
          message: '重新连接成功！',
          type: 'success'
        })
      } else {
        this.$message({
          message: '重新连接失败，请检查后端服务',
          type: 'error'
        })
      }
    },

    toggleDetail() {
      this.showDetail = !this.showDetail
    },

    startAutoCheck() {
      this.checkTimer = setInterval(() => {
        this.checkStatus()
      }, serverStatus.checkInterval)
    },

    stopAutoCheck() {
      if (this.checkTimer) {
        clearInterval(this.checkTimer)
        this.checkTimer = null
      }
    },

    handleOnline() {
      this.$message({
        message: '网络连接已恢复',
        type: 'success'
      })
      this.checkStatus()
    },

    handleOffline() {
      this.isOnline = false
      this.$message({
        message: '网络连接已断开',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.server-status-container {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1000;
  min-width: 120px;

  .status-indicator {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
    }

    &.online {
      border-left: 4px solid #67c23a;

      .status-text {
        color: #67c23a;
      }

      i:not(.toggle-icon) {
        color: #67c23a;
      }
    }

    &.offline {
      border-left: 4px solid #f56c6c;

      .status-text {
        color: #f56c6c;
      }

      i:not(.toggle-icon) {
        color: #f56c6c;
      }
    }

    &.checking {
      border-left: 4px solid #409eff;

      .status-text {
        color: #409eff;
      }

      i:not(.toggle-icon) {
        color: #409eff;
      }
    }

    i:not(.toggle-icon) {
      margin-right: 6px;
      font-size: 14px;
    }

    .status-text {
      font-size: 12px;
      font-weight: 500;
      margin-right: 6px;
    }

    .toggle-icon {
      font-size: 12px;
      color: #c0c4cc;
      transition: transform 0.3s;

      &.is-active {
        transform: rotate(180deg);
      }
    }
  }

  .status-detail {
    margin-top: 8px;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-size: 12px;

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #666;
        font-weight: 500;
        min-width: 60px;
      }

      .value {
        color: #333;
        flex: 1;
        text-align: right;
        word-break: break-all;

        &.online {
          color: #67c23a;
        }

        &.offline {
          color: #f56c6c;
        }

        &.error {
          color: #f56c6c;
          font-size: 11px;
        }
      }
    }

    .action-buttons {
      margin-top: 12px;
      display: flex;
      gap: 8px;

      .el-button {
        flex: 1;
      }
    }
  }
}

// 动画效果
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
}

.slide-down-enter,
.slide-down-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

// 响应式设计
@media (max-width: 768px) {
  .server-status-container {
    top: 50px;
    right: 10px;
    min-width: 100px;

    .status-indicator {
      padding: 6px 8px;

      .status-text {
        font-size: 11px;
      }
    }

    .status-detail {
      font-size: 11px;
      padding: 8px;
    }
  }
}
</style>
